<!DOCTYPE html>
<html>
	<head>
		<title>js的基本结构和放置的位置</title>
		<meta charset="utf-8">
		
		<script type="text/javascript">
			// 加载函数
			window.onload = function(){
				// 获取节点
				 
				// 检测节点是否获取到
				// alert(btn3);
				// 给btn3按钮加点击事件，弹出alert内的内容
				document.getElementById("btn2-2").onclick = function(){
					alert("放在head内的js");
				}
			}
		</script> 
		<!-- 知识点 
		1.放在head内的js必须先写加载函数，js代码放在加载函数内
		2.加载函数window.onload = function(){}，等html加载完毕后才能执行js代码
		-->
	</head>
	<body>
		<!-- 1.放在行内 -->
		<button onclick="javascript:alert('我是行内的js代码');">行内的js</button>
		<!-- 知识点： 
			1.行内js放在开始标签内
			2.onclick点击事件
			3.js代码写在javascript:js代码;
			4.方法:alert() 弹出警示框
			5.单双引号交替使用
		-->

		<!-- 2-1放在body内的js -->
		<button id="btn2-1">放在body内的js</button>
		<script type="text/javascript">
			// 获取按钮节点，存放在变量btn2中
			var btn2 = document.getElementById("btn2-1");
			// 检测节点是否获取到
			// alert(btn2);
			// 给btn2按钮加点击事件，弹出alert内的内容
			btn2.onclick = function(){
				alert("放在body内的js");
			}
		</script>
		<!-- 知识点
		1.需要写script标签，js代码写在标签内
		2.script标签放在要控制标签的后面
		3.操作文档的步骤：①获取节点 ②检测节点是否获取到 ③给节点加事件
		4.驼峰命名法
		5.js严格区分大小写
		 -->

		<!-- 2-2放在head内的js -->
		<button id="btn2-2">放在head内的js</button>

		<!--3放在外部文件内的js -->
		<button id="btn4">放在外部文件内的js</button>
		<script src="1.js" type="text/javascript"></script>
		<!-- 知识点 
		1.外部js引用在script标签内，用src属性引进去
		2.script标签若放在body内 放在按钮标签的后面
		3.script标签若放在head内 需要给外部的js文件加加载函数
		4.整个HTML文档只有一个加载函数会生效
		-->
	</body>
</html>